<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>注册页</title>
</head>
<body>
  <!--错误  login/register/   会在当前页面url后继续补
     正确写法  /login/register/    ip：port后开始    /-->
  <!--讲登录时只有姓名、密码字段。讲ajax时补充字段设置反例  -->
  <form id="register-form" action="/login/register/" method="post">
    {% csrf_token %}
    姓名：<input id="form-name" type="text" name="name" ><br>
    密码：<input type="password" name="password"><br>
    邮箱：<input type="text" name="email"><br>
    备注：<input type="text" name="note"><br>
    爱好：<input type="text" name="hobby"><br>
    <button type="submit">注册</button>
  </form><br>

  <h3 id="error_message" style="color: red;">{{ error_message }}</h3>

  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script>
    // jquery源代码理解。
    // 1>文件外层被小括号括住，表示浏览器加载完jquery代码后立即执行，这样才不影响后面jquery语法的使用。
    // 2>源码 window.jQuery = window.$ = jQuery;把jquery的方法封装到了全局对象window中。写成 window.jQuery('#form-name'); window.$('#form-name')  ;  $('#form-name')
    // 3>$('#form-name')   jquery对象初始化、根据参数选择标签，实质上用的还是原生js方法。document.getElementByxxxx()
    // js {} 表示函数体或对象。对象 键key不用加引号。
    $(function(){
        $('#form-name').change(function(){
            console.log('触发change事件')
            $.ajax({
                type: "POST",   // 请求方式
                url: 'http://127.0.0.1:8000/login/register_check/',  // 接口
                data: {'name': $('#form-name').val()},
                async: true,  // 默认异步。这个参数可以不写
                dataType: "json",   //  返回值类型   json或xml
                error: function(){
                    // 错误回调函数 ，
                    // 指的是http请求的成功失败，不是业务逻辑用户名长短是否合格
                },
                success: function(resp){
                    // 成功回调
                    console.log(resp) // js对象
                    console.log(resp.error_message)
                    error_message = resp.error_message
                    $('#error_message').html(error_message)
                },
                complete: function(resp){
                    {#console.log(resp)#}
                    {#respText = resp.responseTEXT#}
                    {#resp_json_obj = JSON.parse(respText)#}
                    {#resp_json_obj.error_massage#}
                    // 请求完成后执行
                }
            })
        })
    })
  </script>

</body>
</html>